<template>
	<div class="poCustomerMine">
		<group class="salesDataDiscoveryGroup">
			<div style="margin-top: 5px; margin-bottom: 5px; z-index: 999">
				<span style="font-weight: bold; font-size: 15px; padding-left: 5px">客户信息</span>
				<button-tab class="btnTab">
					<button-tab-item :selected="page === 'myPoCustomer'" @on-item-click="fetchData(0)">准客户</button-tab-item>
					<button-tab-item :selected="page === 'myCustomer'" @on-item-click="fetchData(1)">客户</button-tab-item>
				</button-tab>
			</div>
		</group>

		<grid class="memberStatusTitle" :show-vertical-dividers="false">
			<grid-item @click.native="orderByFunc('name')">
				<span class="grid-center" style="margin-left: 10px;">姓名<img slot="icon" style="width: 13px" src="@/assets/svg/icon_order.svg"></span>
			</grid-item>
			<grid-item @click.native="orderByFunc('tag')">
				<span class="grid-center" style="margin-left: 10px;">可能性<img slot="icon" style="width: 13px" src="@/assets/svg/icon_order.svg"></span>
			</grid-item>
			<grid-item @click.native="orderByFunc('age')">
				<span class="grid-center" style="margin-left: 10px;">年龄<img slot="icon" style="width: 13px" src="@/assets/svg/icon_order.svg"></span>
			</grid-item>
			<grid-item @click.native="orderByFunc('stage')">
				<span class="grid-center" style="margin-left: 10px;">阶段<img slot="icon" style="width: 13px" src="@/assets/svg/icon_order.svg"></span>
			</grid-item>
			<grid-item @click.native="orderByFunc('days')">
				<span class="grid-center" style="margin-left: 10px;">时间<img slot="icon" style="width: 13px" src="@/assets/svg/icon_order.svg"></span>
			</grid-item>
		</grid>

		<div v-if="page == 'myPoCustomer'">
			<myCustomerList curURL="ai/sales/pages/getMyCustomerModel" :orderBy="orderBy" :sequence="sequence" :username="username" jumpToObjectDetails="customerDetails" status="0"></myCustomerList>
		</div>
		<div v-else-if="page == 'myCustomer'">
			<myCustomerList curURL="ai/sales/pages/getMyCustomerModel" :orderBy="orderBy" :sequence="sequence" :username="username" jumpToObjectDetails="customerDetails" status="1"></myCustomerList>
		</div>

	</div>
</template>

<script>
	import bus from '@/event/eventBus'
	import myCustomerList from '../../../../components/mobile/scroller/scrollerMyPoCustomerList'
	import MemberDetailsList from '../../../../components/mobile/scroller/scrollerMember'
	import {Group, Cell, XButton, Grid, GridItem, ButtonTab, ButtonTabItem} from 'vux'
	export default {
		name: "myCustomer",
		components: {
			Group,
			Cell,
			XButton,
			Grid,
			GridItem,
			MemberDetailsList,
			myCustomerList,
			ButtonTab,
			ButtonTabItem
		},
		data() {
			return {
				title: '准客户总览',
				items: [],
				orderBy: 'days',
				sequence: 'asc',
				username: '',
				page: 'myPoCustomer'
			}
		},
		beforeRouteLeave(to, from, next){
			//存储当前页面信息
			this.$store.commit('CREATE_URL_PARAMS', {name: from.name, params: this.page})
			next()
		},
		created: function () {
			bus.$emit("barController", 0)
			bus.$emit("userDefinedEvent", 1)

			this.$store.commit('FETCH_URL_PARAMS')
			if(this.$store.state.user.urlParamsMap !=null && this.$store.state.user.urlParamsMap["myCustomer"] != null){
				this.page = this.$store.state.user.urlParamsMap["myCustomer"].params
			}

			this.username = this.$store.state.user.userModel.sysUser.username
			if(sessionStorage.orderBy != null){
				this.orderBy = sessionStorage.orderBy
			}

			if(sessionStorage.sequence != null){
				this.sequence = sessionStorage.sequence
			}

		},
		methods: {
			fetchData: function (value) {
				if(value == 1){
					this.page = 'myCustomer'
				}else{
					this.page = 'myPoCustomer'
				}
			},
			orderByFunc: function (value) {
				this.orderBy = value
				if(this.sequence == 'asc'){
					this.sequence = 'desc'
				}else{
					this.sequence = 'asc'
				}
				sessionStorage.orderBy = this.orderBy
				sessionStorage.sequence = this.sequence
			}
		}
	}
</script>

<style>
	.btnTab{
		width: 120px;
		float: right;
		margin-bottom: 5px;
		margin-right: 5px;
	}

	.btnTab > .vux-button-tab-item{
		font-size: 12px;
	}

	.salesDataDiscoveryGroup > .weui-cells {
		z-index: 999;
		font-size: 17px !important;
	}

	.grid-center {
		display: block;
		text-align: center;
		color: #666;
	}

	.grid-center-name{
		display: block;
		text-align: center;
		color: #43abe3;
	}

	.poCustomerMine {
		margin-top: 46px;
	}

	.poCustomerMine > .weui-grids > .weui-grid {
		padding: 10px 0px;
		text-decoration: none;
		font-size: 12px;
	}

	.memberStatusTitle {
		background-color: lightgoldenrodyellow;
		z-index: 999;
	}

	.memberStatusCell {
		background-color: white;
	}

	.memberStatusGroup > .weui-cells {
		z-index: 999;
	}
</style>